<template>
  <div id="handleDialog">
    <el-dialog
      class="about-set"
      width="620px"
      :title="handleDialogData.type === 'add' ? '添加头图' : '编辑图片广告'"
      :visible.sync="handleDialogData.isShow"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item v-if="handleDialogData.type === 'edit'" label="ID">
          <el-input style="width: 310px" disabled v-model="form.id"></el-input>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input style="width: 310px" v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="reply">
          <el-input style="width: 310px" v-model="form.content"></el-input>
        </el-form-item>
        <el-form-item label="选择学院" prop="categoriesId">
          <el-select
            @change="selectCollege"
            style="width: 310px"
            v-model="form.categoriesId"
            clearable
          >
            <el-option
              v-for="item in collegeList"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片" prop="img">
          <el-input style="width: 310px" ref="img" v-model="form.img" />
          <!-- 上传图片 -->
          <el-upload
            action="#"
            accept="image/png, image/jpeg"
            class="upload-demo"
            :on-change="changeUpload"
            :before-upload="beforeNoticeUpload"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="跳转类型" prop="link">
          <el-radio-group v-model="form.jumpType">
            <el-radio label="DETAILS">详情页</el-radio>
            <el-radio label="COURSE">橱窗课程（限pc端）</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="详情页链接" prop="link">
          <el-input style="width: 310px" v-model="form.link"></el-input>
        </el-form-item>
        <el-form-item
          v-if="form.jumpType === 'COURSE'"
          label="橱窗课程"
          prop="link"
        >
          <el-select
            style="width: 310px"
            v-model="form.displayCourseId"
            clearable
          >
            <el-option
              v-for="item in shopWindowCourseList"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="显示顺序" prop="link">
          <el-input style="width: 310px" v-model="form.ordered"></el-input>
        </el-form-item>
        <el-form-item label="banner类型" prop="link">
          <el-select style="width: 310px" v-model="form.bannerType" clearable>
            <el-option label="首页" value="HOMEPAGE"></el-option>
            <el-option label="积分" value="INTEGRAL"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否发布" prop="link">
          <el-radio-group v-model="form.status">
            <el-radio label="PUBLISHED">确认发布</el-radio>
            <el-radio label="UNRELEASED">暂不发布</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否包含详情" prop="link">
          <el-radio-group v-model="form.isContainDetailed">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="cardinality">
          <span class="cardinality-text">阅读基数:</span>
          <el-input
            style="width: 100px"
            v-model="form.browsingFictitiousCount"
          ></el-input>
          <span class="truth-text">真实阅读数:</span>
          <el-input style="width: 100px" value="0"></el-input>
        </div>
        <div class="cardinality">
          <span class="cardinality-text">点赞基数:</span>
          <el-input
            v-model="form.praiseFictitiousCount"
            style="width: 100px"
            value="0"
          ></el-input>
          <span class="truth-text">真实点赞数:</span>
          <el-input style="width: 100px" value="0"></el-input>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="confirmHandle('ruleForm')"
          >确 定</el-button
        >
        <el-button @click="handleDialogData.isShow = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { uploadImg } from '@/api/common/img' // 上传图片接口
import { addTopGraph, editTopGraph } from '@/api/classifyManage/topDiagram'
import { sysNormalDisable } from '@utils/dictionariesFunc'
import {
  queryDisplayVipCourses,
  getTopGraphDetail
} from '@/api/classifyManage/topDiagram'
export default {
  props: {
    handleDialogData: {
      type: Object,
      default: () => {
        return {
          isShow: false,
          params: ''
        }
      }
    }
  },
  data() {
    return {
      // 橱窗课程
      shopWindowCourseList: [],
      courseInfo: {
        collegeId: '',
        status: 'PUBLISHED',
        title: ''
      },
      uploadLoading: false,
      uploadDisabled: false,
      headers: {
        authorization: 'authorization-text'
      },
      collegeList: [
        // 学院
        { dictLabel: '全部学院', dictValue: '' }
      ],
      form: {
        id: '',
        title: '',
        content: '',
        categoriesId: '',
        img: '',
        link: '',
        ordered: '',
        bannerType: 'HOMEPAGE',
        jumpType: 'DETAILS',
        isContainDetailed: false,
        status: 'PUBLISHED',
        browsingFictitiousCount: '',
        praiseFictitiousCount: '',
        displayCourseId: ''
      },
      ruleForm: {
        keyword: '',
        reply: '',
        link: ''
      },
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        categoriesId: [
          { required: true, message: '请选择课程分类', trigger: 'blur' }
        ],
        img: [{ required: true, message: '请输入图片', trigger: 'blur' }]
      }
    }
  },
  watch: {},
  mounted() {
    this.getStatusList()
    // 橱窗课程查询学院下的橱窗vip课
    if (this.handleDialogData.type === 'edit') {
      this.getTopGraphDetailData(this.handleDialogData.params.id)
      // this.ruleForm = Object.assign(this.handleDialogData.params)
    }
  },
  methods: {
    // 选择学院
    selectCollege(id) {
      this.courseInfo.collegeId = id
      this.loadCourseVipList()
    },
    getTopGraphDetailData(id) {
      getTopGraphDetail(
        id,
        (response) => {
          this.form.id = response.id
          this.form.title = response.title
          this.form.categoriesId = response.categoriesId
          this.form.img = response.img
          this.form.status = response.status
          this.form.link = response.link
          this.form.content = response.content
          this.form.ordered = response.ordered
          this.form.bannerType = response.bannerType
          this.form.jumpType = response.jumpType
          this.form.praiseFictitiousCount = response.praiseFictitiousCount
          this.form.browsingFictitiousCount = response.browsingFictitiousCount
          this.form.isContainDetailed = response.containDetailed
          this.courseInfo.collegeId = response.categoriesId
          this.loadCourseVipList()
        },
        (response) => {}
      )
    },
    loadCourseVipList() {
      queryDisplayVipCourses(
        this.courseInfo,
        (response) => {
          this.shopWindowCourseList = response
          if (this.shopWindowCourseList.length > 0) {
            if (this.handleDialogData.type === 'add') {
              this.form.displayCourseId = this.shopWindowCourseList[0].id
            } else {
              this.form.displayCourseId = this.handleDialogData.params.course.id
            }
          } else {
            this.form.displayCourseId = ''
          }
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 上传图片前判断
    beforeNoticeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || 'image/png'
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 或者 png 格式!')
      }
      return false
    },
    // 上传图片
    async changeUpload(file) {
      let formData = new FormData()
      formData.append('file', file.raw)
      uploadImg(
        formData,
        (response) => {
          this.form.img = response[0].url
        },
        (response) => {
          this.$message.warning(response.message)
        }
      )
    },
    async getStatusList() {
      // 学院
      let data2 = await sysNormalDisable('sys_college', 'LVideocollegeType')
      this.collegeList = this.collegeList.concat(data2)
    },
    // 点击确定
    confirmHandle(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.handleDialogData.type === 'add') {
            addTopGraph(
              this.form,
              (response) => {
                this.handleDialogData.isShow = false
              },
              (response) => {
                this.$message.error(response.message)
              }
            )
          } else {
            editTopGraph(
              this.form,
              (response) => {
                this.$message.success('编辑成功')
                this.handleDialogData.isShow = false
              },
              (response) => {
                this.$message.error(response.message)
              }
            )
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
#handleDialog {
  .cardinality {
    margin-top: 20px;
    margin-left: -20px;
    height: 55px;
    & > span.cardinality-text {
      margin-left: 60px;
      margin-right: 10px;
      color: #000000d9;
    }
    & > span.truth-text {
      margin-left: 110px;
      margin-right: 10px;
      color: #000000d9;
    }
  }
}
</style>
